<template>
  <div class="question-answer">
    <el-card>
      <template #header>
        <h2>AI问答</h2>
      </template>
      
      <el-form @submit.prevent="handleSubmit">
        <el-form-item label="请输入您的问题">
          <el-input
            v-model="question"
            type="textarea"
            :rows="4"
            placeholder="请输入您的问题..."
            :disabled="loading"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleSubmit"
            :loading="loading"
            :disabled="!question.trim()"
          >
            提交问题
          </el-button>
          <el-button @click="handleClear">清空</el-button>
        </el-form-item>
      </el-form>

      <el-divider v-if="answer" />

      <div v-if="answer" class="answer-section">
        <h3>回答：</h3>
        <el-alert
          v-if="!hasKnowledge"
          title="暂无相关知识"
          type="warning"
          :closable="false"
          show-icon
          style="margin-bottom: 20px"
        >
          知识库中暂时没有相关内容，该问题已记录为未解答问题，您可以在"未解答问题"页面提供人工解答。
        </el-alert>
        
        <div class="answer-content">
          {{ answer }}
        </div>

        <div v-if="sources && sources.length > 0" class="sources-section">
          <h4>知识来源：</h4>
          <div class="source-list">
            <el-card
              v-for="(source, index) in sources"
              :key="index"
              class="source-item"
              shadow="hover"
            >
              <div class="source-header">
                <el-tag type="primary" size="small">
                  {{ source.documentName }}
                </el-tag>
                <el-tag v-if="source.score" type="success" size="small">
                  相关度: {{ (source.score * 100).toFixed(1) }}%
                </el-tag>
              </div>
              <div v-if="source.content" class="source-content">
                {{ source.content }}
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { askQuestion } from '../api/qa'
import { userStore } from '../store/user'

const question = ref('')
const answer = ref('')
const sources = ref([])
const hasKnowledge = ref(true)
const loading = ref(false)

const handleSubmit = async () => {
  if (!question.value.trim()) {
    ElMessage.warning('请输入问题')
    return
  }

  loading.value = true
  try {
    const response = await askQuestion(question.value, userStore.getCurrentUserId())
    answer.value = response.answer
    sources.value = response.sources || []
    hasKnowledge.value = response.hasKnowledge
    
    if (response.hasKnowledge) {
      ElMessage.success('获取答案成功')
    } else {
      ElMessage.warning('暂无相关知识，已记录为未解答问题')
    }
  } catch (error) {
    ElMessage.error('提交问题失败：' + (error.message || '未知错误'))
    console.error('提交问题失败:', error)
  } finally {
    loading.value = false
  }
}

const handleClear = () => {
  question.value = ''
  answer.value = ''
  sources.value = []
  hasKnowledge.value = true
}
</script>

<style scoped>
.question-answer {
  max-width: 1200px;
  margin: 0 auto;
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.el-card :deep(.el-card__header) {
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 20px;
}

.el-card :deep(.el-card__header h2) {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #262626;
}

.answer-section {
  margin-top: 20px;
}

.answer-section h3 {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 16px;
}

.answer-content {
  background: linear-gradient(135deg, #f6f8fb 0%, #f0f2f5 100%);
  padding: 24px;
  border-radius: 8px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-wrap: break-word;
  border-left: 4px solid #1890ff;
  font-size: 14px;
  color: #262626;
}

.sources-section {
  margin-top: 24px;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 8px;
}

.sources-section h4 {
  margin-bottom: 12px;
  color: #595959;
  font-size: 14px;
  font-weight: 500;
}

.source-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.source-item {
  border-radius: 6px;
}

.source-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.source-content {
  margin-top: 8px;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}
</style>
